<template>
    <template v-for="item in menuData">
      <el-sub-menu
        :key="item.id"
        v-if="item.children && item.children.length > 0"
        :index="item.path"
        :class="item.icon ? '' : 'noIcon'">
        <template #title>
            <el-icon>
              <SvgIcon :iconName="item.icon"/>
            </el-icon>
          <span>{{ item.title }}</span>
        </template>
        <LeftSubMenu :menuData="item.children"></LeftSubMenu>
      </el-sub-menu>
      <el-menu-item
        v-else
        :index="item.path"
        :disabled="item.disabled"
      >
        <template #title>
          <el-icon>
              <SvgIcon :iconName="item.icon"/>
            </el-icon>
          <span>{{ item.title }}</span>
        </template>
      </el-menu-item>
    </template>
  </template>
   
  <script setup>
  import LeftSubMenu from "./LeftSubMenu.vue";
  import { computed } from "vue";
  import { useRouter } from "vue-router";
   
  const props = defineProps({
    menuData: {
      type: Array,
      default: [],
    },
  });
   
  const curRoute = computed(() => {
    const router = useRouter();
    const { path } = router.currentRoute.value;
    return path;
  });
  </script>